<template>
  <div>
    <el-form-item>
      <template #label>
        <span>
          {{ $t("formgen.matrix.organization") }}
          <el-tooltip
            class="item"
            :content="$t('formgen.matrix.content')"
            effect="dark"
            placement="top-start"
          >
            <el-icon><ele-QuestionFilled /></el-icon>
          </el-tooltip>
        </span>
      </template>
      <el-switch v-model="activeData.isSelectOrganization" />
    </el-form-item>
    <el-form-item
      v-if="activeData.multiple !== undefined"
      :label="$t('formgen.matrix.multiple')"
    >
      <el-switch
        v-model="activeData.multiple"
        @change="handleChange"
      />
    </el-form-item>
    <el-form-item
      v-if="activeData.multiple"
      :label="$t('formgen.matrixSelect.optionCount')"
    >
      <el-button
        type="primary"
        icon="ele-Edit"
        @click="handleOpenSelectedRule"
      >
        {{ $t("formgen.matrixSelect.setting") }}
      </el-button>
    </el-form-item>
    <el-form-item
      :label="$t('formgen.matrixSelect.scoreSetting')"
      v-if="formType === 6"
    >
      <el-button
        type="primary"
        icon="ele-Edit"
        @click="handleOpenScoreSetting"
      >
        {{ $t("formgen.matrixSelect.setting") }}
      </el-button>
    </el-form-item>
    <el-dialog
      :title="$t('formgen.matrixSelect.setting')"
      v-model="dialogVisible"
    >
      <table>
        <thead>
          <tr>
            <th>{{ $t("formgen.matrixSelect.optionColText") }}</th>
            <th>{{ $t("formgen.matrixSelect.optionColText2") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="col in activeData.table.columns"
            :key="col.id"
          >
            <td>{{ col.label }}</td>
            <td>
              <el-select v-model="columnSelectedCountRule[col.id]">
                <el-option
                  value="null"
                  :label="$t('formgen.matrixSelect.unlimited')"
                />
                <el-option
                  v-for="(item, index) in activeData.table.rows.length"
                  :key="index"
                  :label="`${item}${$t('formgen.matrixSelect.selectUnit')}`"
                  :value="item"
                ></el-option>
              </el-select>
            </td>
          </tr>
        </tbody>
      </table>
      <template #footer>
        <el-button @click="dialogVisible = false">{{ $t("form.viewOrUpdate.cancel") }}</el-button>
        <el-button
          type="primary"
          @click="handleSaveSelectedRule"
        >
          {{ $t("form.viewOrUpdate.confirm") }}
        </el-button>
      </template>
    </el-dialog>
    <el-dialog
      :title="$t('formgen.matrixSelect.scoreSetting')"
      v-model="scoreDialogVisible"
    >
      <table>
        <thead>
          <tr>
            <th>{{ $t("formgen.matrixSelect.optionColText") }}</th>
            <th>{{ $t("formgen.matrixSelect.score") }}</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="col in activeData.table.columns"
            :key="col.id"
          >
            <td>{{ col.label }}</td>
            <td>
              <el-input-number
                v-model="col.score"
                :min="0"
              />
            </td>
          </tr>
        </tbody>
      </table>
      <template #footer>
        <el-button @click="scoreDialogVisible = false">{{ $t("form.viewOrUpdate.cancel") }}</el-button>
      </template>
    </el-dialog>

    <matrix-option :active-data="activeData" />
  </div>
</template>

<script setup lang="ts" name="ConfigItemMatrixSelect">
import { ref } from "vue";
import MatrixOption from "./matrix.vue";
import { storeToRefs } from "pinia";
import { useFormInfo } from "@/stores/formInfo";

const props = defineProps({
  activeData: {
    type: Object,
    required: true
  }
});

// Reactive state
const dialogVisible = ref(false);
const scoreDialogVisible = ref(false);

const columnSelectedCountRule = ref<Record<string, any>>({});

// Methods
const handleOpenScoreSetting = () => {
  scoreDialogVisible.value = true;
};

// Methods
const handleOpenSelectedRule = () => {
  dialogVisible.value = true;
  columnSelectedCountRule.value = props.activeData.columnSelectedCountRule || {};
};

const handleChange = () => {
  if (props.activeData.config) {
    props.activeData.config.defaultValue = {};
  }
};

const handleSaveSelectedRule = () => {
  if (props.activeData.config) {
    props.activeData.config.columnSelectedCountRule = columnSelectedCountRule.value;
  }
  dialogVisible.value = false;
};

const { formType } = storeToRefs(useFormInfo());
</script>
<style lang="scss" scoped>
table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
}

/* 设置表头样式 */
th {
  background-color: var(--el-color-primary-light-10);
  color: #000000;
  padding: 10px;
  text-align: center;
  border: 1px solid #dcdfe6;
}

/* 设置表格单元格样式 */
td {
  padding: 10px;
  text-align: center;
  border: 1px solid #dcdfe6;
}

/* 设置鼠标悬停效果 */
tr:hover {
}
</style>
